<template>
    <v-group role="scoreGroup" :config="config.group">
        <v-text
            ref="textRef"
            :config="{
                ...config.text,
                text: score,
            }"
        ></v-text>
        <v-image v-if="underlineImage" :config="underlineImageConfig"></v-image>
        <!-- <v-group
            role="underline"
            :config="{ ...config.lineGroup, y: lineGroupY }"
        >
            <v-line
                :config="{ ...config.lines[0], points: line1Points }"
            ></v-line>
            <v-line
                :config="{ ...config.lines[1], points: line2Points }"
            ></v-line>
        </v-group> -->
    </v-group>
</template>
<script setup lang="ts">
import { defineProps, watch, toRefs, ref, onMounted } from "vue";
import * as Konva from "konva";
import scoreUnderline from "@/assets/paper-trace/score-underline.png";

const props = defineProps<{
    score: number;
    config: AnyObject;
}>();
const { score, config } = toRefs(props);
const textRef = ref<Konva.Group>(null);
const underlineImage = ref<HTMLImageElement | null>(null);
const underlineImageConfig = ref({
    x: 0,
    y: 0,
    width: 0,
    height: 0,
});

onMounted(() => {
    calUnderlineImageConfig();
});

// 计算下划线图片的位置和大小
const calUnderlineImageConfig = () => {
    const img = new Image();
    img.src = scoreUnderline;
    img.onload = () => {
        const scale = 1.8;
        const scoreTextWidth = textRef.value?.getNode().width();
        const scoreTextHeight = textRef.value?.getNode().height();
        const underlineWidth = scoreTextWidth * scale;
        const underlineHeight = underlineWidth * (img.height / img.width);
        const cfg = {
            image: img,
            ...config.value.lineGroup,
            x: -scoreTextWidth / scale + 10,
            y: scoreTextHeight,
            width: underlineWidth,
            height: underlineHeight,
        };
        underlineImageConfig.value = cfg;
        underlineImage.value = img;
    };
};
</script>
